<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <#include "/pubHeadStyleTree.html">
</head>
<body>
<div style="position: relative;height: 100%;">
    <div class="ccpui-trees" >
        <p class="isShowTree colorSwitch">
            <span style="float: left;color: #fff">&nbsp;&nbsp;流程分类管理</span>
            <input type="hidden" name="actList">
            <i layadmin-event="treeFlexible" class="layui-icon layui-icon-prev"></i>
        </p>
        <div style="margin-top: 6px;" >
            <ul class="ccpui-iconTree iconTrees">
                <li><a class="iconfont iconshuaxin- zTree-refresh" title="刷新"></a></li>
                <li><a class="iconfont iconwenjianjia1-copy zTree-triangle-d" title="展开"></a></li>
                <li><a class="iconfont iconfolder1 zTree-triangle-r" title="收起"></a></li>
                <input type="text" style="width: 50%" class="catZtreeValue">
            </ul>
            <ul id="processTree" class="ztree ccpui-listZtree"></ul>
        </div>
    </div>
    <div class="ccpui-coreContent" style="position: absolute;top:10px;right:210px;bottom: 0;left: 250px">
        <div id="flowListDiv">
            <table id="flowList" lay-filter="flowList" ></table>
        </div>
    </div>
    <div style="position: absolute;top:10px;right:10px;bottom: 0;left: 800px">
        <div class="layui-card" style="height: 682px">
            <div class="layui-card-header">已选择</div>
            <div class="layui-card-body selectedList">
            </div>
        </div>
    </div>
</div>

<style>
    div#LAY_app{
        overflow-x: hidden !important;
        overflow-y: auto !important;
    }
</style>
<script type="text/html" id="customHeaderTool">
    <div class="layui-btn-container" style="float: right;">
        <a class="layui-btn layui-btn-sm" lay-event="query" style="margin: 4px 0">
            <i class="layui-icon layui-icon-search"></i>
            <span>查询</span>
        </a>
    </div>
    <form class="layui-form" action="" style="margin-top:10px">
        <div class="table-top-filter" style="width: 580px">
            <div class="table-filter-alone">
                <label class="layui-form-label" style="width: 66px;">标题:</label>
                <input type="text" name="name" id="name" class="layui-input filter-value" placeholder="标题"
                       autocomplete="off"/>
            </div>
        </div>
    </form>
</script>
<script>
    layui.config({
        base: serverPath.systemPath + staticPath.systemPath //静态资源所在路径
    }).extend({
        index: 'index' //主入口模块
    }).use(['index','table', 'layer', 'jquery', 'form','util', 'tree','commons', 'totalFilter', 'setter','admin','common'], function () {
        var table = layui.table, layer = layui.layer, setter = layui.setter, commons = layui.commons,
          totalFilter = layui.totalFilter, form = layui.form, $ = layui.$;
        var admin = layui.admin;
        var util = layui.util;
        var common = layui.common;

        if(!layui.actList) layui.actList = [];
        var defaultActList = [];
        var selectedList = [];
        if(layui.actList.length>0){
            defaultActList = defaultActList.concat(layui.actList);
            selectedList = selectedList.concat(layui.actList);
        }

        // 初始化
        resZtrees();
        loadTable( serverPath.workflowPath+ setter.workflowLinkPath + 'actDefModel/flowSelector');
        totalFilter.init();

        // region 渲染流程分类树
        function resZtrees() {
            $.ajax({
                url: serverPath.workflowPath+ setter.workflowLinkPath + "bpmDefAuthorize/getFlowTypeByFlow",
                type: "post",
                dataType: 'json',
                data: {"catKey": "FLOW_TYPE", "hasRoot": true},
                success: function (data) {
                    var zNodes = data.data;
                    var setting = {
                        view: {
                            showLine: false,
                            nameIsHTML: true, //允许name支持html
                            selectedMulti: false
                        },
                        edit: {
                            enable: false,
                            editNameSelectAll: false
                        },
                        data: {
                            simpleData: {
                                enable: true,
                                idKey: "typeId",
                                pIdKey: "parentId"

                            },
                            key: {
                                name: "typeName"
                            }
                        },

                        callback: {
                            onClick: onClickType
                        }
                    };
                    $.fn.zTree.init($('#processTree'), setting, zNodes);
                    component.fuzzySearch('processTree', null, true); //初始化模糊搜索方法
                }
            });
        }
        // endregion
        // region 流程分类树操作
        //刷新
        $(".zTree-refresh").click(function () {
            resZtrees();
        });
        //展开
        $(".zTree-triangle-d").click(function () {
            $.fn.zTree.getZTreeObj("processTree").expandAll(true);
        });
        //收起
        $(".zTree-triangle-r").click(function () {
            $.fn.zTree.getZTreeObj("processTree").expandAll(false);
        });
        // 树点击事件
        var typeId = "";
        var typeName = "";
        function onClickType(event, treeId, treeNode) {
            typeId = treeNode.typeId;
            typeName = treeNode.nodeKey;
            if (null == treeNode.parentId) {
                //选择父流程分类，直接表格数据重载
                table.reload('flowList', { where: {typeId: "" } });
            }else {
                //选择流程分类，添加typeId后，表格数据重载
                table.reload('flowList', {  where: {    typeId: typeId  }   });
            }
        }
        //树状菜单隐藏
        var treeval = true;
        $(".treeone").click(function () {
            treeval = tresStyle(treeval, ".treeone");
        });
        function onClickRess(event, treeId, treeNode, clickFlag) {
            selectOrgId = treeNode.orgId;
        }
        // endregion
        // region 渲染表格
        function loadTable(url) {
            table.render({
                elem: '#flowList'
                ,url: url
                ,title: '流程选择'
                ,height:'full-74'
                ,defaultToolbar: []
                ,toolbar: '#customHeaderTool'
                ,cols: [[
                    {type: 'checkbox'}
                    ,{field: 'name', title: '标题', align: 'center'}
                    ,{field: 'typeName', title: '分类', align: 'center', width: 100}
                    ,{field: 'version', title: '版本', align: 'center', width: 60}
                    ,{field: 'status', title: '状态', align: 'center', width: 80, templet: function (d) {
                            var status = d.status;
                            switch (status) {
                                case 0:
                                    return "未发布";
                                case 1:
                                    return "发布";
                                case 2:
                                    return "禁用";
                                case 3:
                                    return "禁用，并禁用实例";
                                case 4:
                                    return "测试";
                            }
                        }}
                ]]
                ,page: true
                ,parseData: function (res) {
                    var _data = res.data;
                    if (_data.length > 0 && selectedList.length > 0) {
                        for (var i = 0; i < _data.length; i++) {
                            var _d = _data[i];
                            for (var j = 0; j < selectedList.length; j++) {
                                var _td = selectedList[j];
                                if (_d.modelKey === _td.defKey) {
                                    _d.LAY_CHECKED = true;
                                }
                            }
                        }
                    }
                    // 渲染“已选择”列表
                    renderSelectedList();
                }
            });
        }
        $(document).on("click","#flowListDiv .layui-table-body table.layui-table tbody tr",function(){
            var obj = event ? event.target : event.srcElement;
            var tag = obj.tagName;
            var checkbox = $(this).find("td div.laytable-cell-checkbox div.layui-form-checkbox I");
            if(checkbox.length!=0){
                if(tag == 'DIV') {
                    checkbox.click();
                }
            }
        });
        $(document).on("click","td div.laytable-cell-checkbox div.layui-form-checkbox",function(e){
            e.stopPropagation();
        });
        // endregion
        // region 表格事件
        //表格头工具栏事件
        table.on('toolbar(flowList)', function (obj) {
            var checkStatus = table.checkStatus(obj.config.id);
            var data = checkStatus.data; //获取选中行数据
            switch (obj.event) {
                case 'query':
                    table.reload("flowList", {
                        where: {
                            Q_name_SL: $("#name").val(),
                        },
                        page: {
                            curr: 1
                        }
                    });
                    break;
            }
        });
        // 表格checkbox事件
        table.on('checkbox(flowList)',function (obj) {
            layui.each(table.checkStatus('flowList').data,function(i,v){
                var index = indexOfActList(v.modelKey);
                if(index === -1){
                    selectedList.push({defKey: v.modelKey,defName: v.name,rightContent: {m_edit:"N", m_del: "N", m_start: "N", m_set: "N",m_clean: "N",i_del:"N",i_log:"N"}});
                }
            });
            if(!obj.checked) {
                if(obj.type === 'all'){
                    layui.each(table.cache.flowList,function(i,v){
                        var index = indexOfActList(v.modelKey);
                        selectedList.splice(index,1);
                    })
                }else{
                    var index = indexOfActList(obj.data.modelKey);
                    selectedList.splice(index,1);
                }
            }
            // 渲染“已选择”列表
            renderSelectedList();

        });
        function indexOfActList(defKey){
            var i = -1;
            layui.each(selectedList,function(index,item){
                if(item.defKey === defKey){
                    i = index;
                    return true;
                }
            });
            return i;
        }
        // 渲染“已选择”列表函数
        function renderSelectedList(){
            $('.selectedList').html("");
            layui.each(selectedList,function(i,v){
                $('.selectedList').append('<a href="javascript:delSelected(\''+ v.defKey +'\');"><span>'+ v.defName +'</span><i class="layui-icon layui-icon-delete"></i></a>');
            });
            $("input[name=actList]").val(JSON.stringify(selectedList));
        }
        // 删除“已选择”项函数
        window.delSelected = function(defKey){
            selectedList.splice(indexOfActList(defKey),1);
            // 重新渲染“已选择”列表
            renderSelectedList();
            // 重新渲染流程列表表格
            table.reload('flowList',{
                parseData: function (res) {
                    var _data = res.data;
                    if (_data.length > 0 && selectedList.length > 0) {
                        for (var i = 0; i < _data.length; i++) {
                            var _d = _data[i];
                            for (var j = 0; j < selectedList.length; j++) {
                                var _td = selectedList[j];
                                if (_d.modelKey === _td.defKey) {
                                    _d.LAY_CHECKED = true;
                                }
                            }
                        }
                    }
                },
                page: {curr: 1}
            });
        }
        // endregion
        // region 按钮事件
        // endregion
    });
</script>
<style>
    .selectedList a {
        cursor: pointer;
        position: relative;
        display: block;
        padding: 2px 5px;
    }
    .selectedList i {
        position: absolute;
        right: 10px;
    }
   .layui-table-tool-temp{
       padding: 0;
   }
    div#LAY_app{
        overflow: hidden;
    }
</style>
</body>
</html>